import React,{ useState,useEffect } from 'react';

// 引入页头组件
import Pageheader from '@/components/Pageheader';

import { Input,Table,Tag } from 'antd';
// 引入电影页数据
import { Filmlist } from '@/api/film';

// 引入分页组件
import Mypagniation from '@/components/Mypagniation';

const { Search } = Input;
const Index = () => {
	
	// 定义列
	const columns = [
		{
			title: '序号',
			dataIndex: 'id',  // 表示该列数据中对应哪一个字段
			key: 'id',
			// render: (text) => <a>{text}</a>,
		},
		{
			title: '电影院',
			dataIndex: 'name',
			key: 'id',
		},
		{
			title: '所在城市',
			dataIndex: 'city_name',
			key: 'id',
		},
		{
			title: '所在区',
			dataIndex: 'district_name',
			key: 'id',
		},
		{
			title: '具体地址',
			dataIndex: 'address',
			key: 'id',
		},
		{
			title: '状态',
			key: 'id',
			dataIndex: 'status',
			render: (tags) => {
				// tage就是该列数据对象中对应gender的value值
				
				return <Tag color={tags===2?'success':'error'}>
					{tags === 2?'正常营业':'暂停营业'}
				</Tag>
			},
		},
	];

	// 定义数据列表相互据请求
	const [page, setPage] = useState(1)
	const [useFilm,setUseFilm] = useState([])
	// 设置总的数据条数
	const [total,setTotal] = useState(0)
	// 模糊数据
	const [filterVlaue,setfilterVlaue] =useState('')
	
	useEffect(()=>{
		FilmlistFn({page,keyword:filterVlaue})
	},[filterVlaue, page])

	// 请求电影列表
	const FilmlistFn = (params) => {
		Filmlist(params).then((res)=>{
			console.log('电影',res);
			if(res.data.errNo===0){
				setUseFilm(res.data.paginate.data)
				setTotal(res.data.paginate.total)
			}else{
				console.log('111');
			}
		})
	}

	const onSearch = (value) => {
		setfilterVlaue(value)
		FilmlistFn({page,keyword:value})
	};

	return (
		<div>
			{/* 页头标签 */}
			<Pageheader title='电影列表'>
				<Search style={{width:230}} placeholder="请输入影院名" onSearch={onSearch} enterButton />
			</Pageheader>
			{/* 展示表格数据 */}
			<Table
				columns={columns}
				pagination={false}
				dataSource={useFilm}
				rowKey={(record) => record.id}
			/>
			{/* 分页 */}
			<Mypagniation page={page} total={total} setPage={setPage}></Mypagniation>
		</div>
	);
}

export default Index;
